import React, { useState } from 'react'
import { LoopOutline } from 'antd-mobile-icons'
import { useSelector, useDispatch } from 'react-redux'
import { Button, CalendarPickerView, Popup } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import withLogin from '../../hoc/withLogin'
function Home() {
  const nav=useNavigate()
  const from = useSelector(store => (store.ticket.from))
  const to = useSelector(store => (store.ticket.to))
  const date = useSelector(store => (store.ticket.date))
  const isSpeed = useSelector(store => (store.ticket.isSpeed))
  const [visible5, setVisible5] = useState(false)
  const gotoList=()=>{
    nav(`/ticket?start=${from}&end=${to}&date=${date}&isSpeed=${isSpeed}`)
  }
  return (

    <div>
      <div>
        <h1>火车票预订</h1>
        <p>便捷购票，服务您的每一次出行</p>
      </div>
      {/* 出发地、目的地、时间 */}
      <div style={{ marginTop: '50px', display: 'flex', justifyContent: 'space-around' }}>
        <span>{from}</span>
        <LoopOutline />
        <span>{to}</span>
      </div>
      <div style={{ fontSize: '18px', alignItems: 'center', marginLeft: '50px' }} onClick={() => setVisible5(true)}>{date}</div>
      <div><Button color='primary' fill='solid' block onClick={gotoList}>
        查询
      </Button>
      </div>
      {/* 弹出层   */}
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
        {/* 日历 */}
        <CalendarPickerView
        />
      </Popup>
    </div>
  )
}

export default withLogin(Home)